<template>
  <div class="outer-padding data-outer">
    <div class="ds-title pd-bottom--32">数据概览</div>
    <div class="pd-bottom--32">
      <overview-school></overview-school>
    </div>
    <!-- 内容模块 -->
    <div class="outer-analysis">
      <a-tabs v-model:activeKey="activeKey" @change="navTab">
        <a-tab-pane :key="index" :tab="item" v-for="(item, index) in nav"></a-tab-pane>
      </a-tabs>
      <div class="table-ctx overflow-xy">
        <component :is="vaiable"></component>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { SvgIcon } from '@/components/svg-icon'
  import tab1 from './tab1.vue'
  import tab2 from './tab2.vue'
  import tab3 from './tab3.vue'
  import tab4 from './tab4.vue'
  import overviewSchool from '@/layout/header/components/overview-school.vue'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      SvgIcon,
      tab_1: tab1,
      tab_2: tab2,
      tab_3: tab3,
      tab_4: tab4,
      overviewSchool,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        vaiable: 'tab_1',
        activeKey: 0,
        nav: ['评课分析', '听课分析', '学院评课分析', '被听评课教师分析'],
        timeNav: [
          { id: 0, name: '近7天', active: true },
          { id: 1, name: '近30天', active: false },
          { id: 2, name: '近180天', active: false },
        ],
      })

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {})

      const navTab = (step) => {
        console.log(step)
        state.vaiable = `tab_${step + 1}`
      }

      return {
        ...toRefs(state),
        tableRef,
        navTab,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .data-outer {
    position: relative;
  }
  .outer-analysis {
    position: sticky;
    top: 0;
  }
</style>
